<!--
 * @Author: 詹真琦(legendryztachi@gmail.com)
 * @Date: 2022-04-19 16:44:24
 * @LastEditors: 詹真琦(legendryztachi@gmail.com)
 * @LastEditTime: 2022-06-06 17:21:33
 * @FilePath: \code\cwp-front\pc-collaboration\src\components\classic-layout\summary\handle-right\components\textarea\components\track\index.vue
 * @Description: 跟踪。以后有时间就把新建里面的替换了
-->
<template>
  <div class="track-modal" style=" justify-content: flex-start;">
    <a-checkbox :disabled="disable" :checked="isTrack" @change="() => $emit('update:isTrack', !isTrack)">{{
      $i18n('collaboration.forward.page.label4')
    }}</a-checkbox>
    <a-radio-group  v-model="isHideTrack" :disabled="!isTrack||disable" style="margin-top: 0">
      <a-radio :value="true">{{ $i18n('common.pending.all') }}</a-radio>
      <a-radio :value="false" class="people-select-wrapper">{{ $i18n('col.track.part') }}</a-radio>
    </a-radio-group>
    <a-tooltip :title="trackMemberNames">
      <div v-show="!isHideTrack && isTrack"  class="track-people-select-container" :class="{'disable-input':disable}" @click="track">
        <div class="track-people-select">{{ trackMemberNames }}</div>
        <icon-font type="cap-icon-xuanren" class="people-icon" />
      </div>
    </a-tooltip>
  </div>
</template>
<script>
  // 引入相关数据
  import { useBaseInfoStore } from '@/store/modules/base-info';
  import { mapState } from 'pinia';
  export default {
    name: 'Track',
    props: {
      disable:{
        type:Boolean,
        default:false,
      },
      //是否跟踪
      isTrack: {
        type: Boolean,
        default: false
      },
      //是否跟踪全部人
      isTrackAll: {
        type: Boolean,
        default: false
      },
      //跟踪的指定人列表
      trackMembers: {
        type: String
      },
      //跟踪的指定人名称列表
      trackMemberNames: {
        type: String
      }
    },
    data() {
      return {
        isHideTrack: this.isTrackAll == null || this.isTrackAll //选项
      };
    },
    computed: {
      ...mapState(useBaseInfoStore, ['baseInfo'])
    },
    watch: {
      isHideTrack(v) {
        //全部
        if (v) {
          this.$emit('update:isTrackAll', true);
          this.$emit('update:trackMembers', '');
          this.$emit('update:trackMemberNames', '');
        } else {
          //指定人
          this.$emit('update:isTrackAll', false);
          //打开选人框
          this.track();
        }
      }
    },
    methods: {
      //打开跟踪弹窗选人
      track() {
        $.selectPeople({
          type: 'selectPeople',
          panels: 'Department,Team,Post,Outworker,RelatePeople,JoinOrganization,BusinessDepartment',
          selectType: 'Member,OrgMetadataTag',
          text: $.i18n('common.default.selectPeople.value'),
          hiddenPostOfDepartment: true,
          hiddenRoleOfDepartment: true,
          showFlowTypeRadio: false,
          returnValueNeedType: false,
          hiddenMetadataOfDepartment: true,
          accessFileSecretLevel: this.baseInfo.secretLevel.value,
          params: {
            value: this.trackMembers
          },
          targetWindow: getCtpTop(),
          callback: ({ obj, text }) => {
            console.log(obj, text);
            this.$emit('update:trackMembers', obj.map((d) => `Member|${d.id}`).join(','));
            this.$emit('update:trackMemberNames', text);
          }
        });
      }
    }
  };
</script>
<style lang="scss" scoped inline>
  .track-modal {
    position: relative;
    line-height: 32px;
    height: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
    margin-left: 30px;
    margin-right: 30px;
    > .ant-radio-group {
      display: block;
      margin: 10px 0;
    }

    .people-select-wrapper {
      margin-right: 0px;
    }

    .track-people-select-container {
      display: flex;
      flex-grow: 1;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 32px;
      padding: 0 10px;
      border-radius: 4px;
      border: $border2;
      background-color: #fff;
      cursor: pointer;

      &:hover {
        border-color: $c2;
      }

      > .track-people-select {
        @include ellipsis;
        width: 90%;
      }

      > .people-icon {
        color: #1890ff;
      }
      &.disable-input{
        pointer-events: none;
        cursor: not-allowed;
      }
    }
   
  }
</style>
<style scoped>
  .track >>> .ant-radio + span {
    position: relative;
    top: 1px;
  }
</style>
